<template>
  <el-dialog v-model="dialogVisible" :title="title" width="80%" :before-close="handleClose">
    <el-table :data="tableData" border style="width: 100%" height="500">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="category" label="项目类别" />
      <el-table-column prop="code" label="项目编号" />
      <el-table-column prop="name" label="项目名称" show-overflow-tooltip />
      <el-table-column prop="price" label="单价" align="right">
        <template #default="scope"> {{ scope.row.price }}元 </template>
      </el-table-column>
      <el-table-column prop="count" label="数量" align="right" />
      <el-table-column prop="total" label="金额" align="right">
        <template #default="scope"> {{ scope.row.total }}元 </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import http from '@/util/http1'

const emit = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)
const tableData = ref([])
const title = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const currentId = ref('')

const fetchData = async () => {
  try {
    const res = await http.get(`/api/fee/details/${currentId.value}`, {
      params: {
        pageNo: currentPage.value,
        pageSize: pageSize.value,
      },
    })
    tableData.value = res.data.list || []
    total.value = res.data.total || 0
  } catch (error) {
    console.error('获取费用明细失败:', error)
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

const handleClose = () => {
  tableData.value = []
  dialogVisible.value = false
  title.value = ''
  currentPage.value = 1
  total.value = 0
  currentId.value = ''
  emit('update:modelValue', false)
}

const open = async (id, titleName) => {
  dialogVisible.value = true
  currentId.value = id
  title.value = titleName || ''
  currentPage.value = 1
  await fetchData()
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>
